<!DOCTYPE html>
<html>
  <head>
    <title>Muran.me</title>
    <link rel="stylesheet" href="/public/index.css"></link>
    <link rel="icon" type="image/x-icon" href="/public/logo.ico">
  </head>
  <body>
    <div id="root">
      <%- include('header.ejs') %>
      <div id="article-container">
          <div class="article-wrapper">
            <div class="article-img">
                <img src="public/Head-section.png" />
            </div>
            <div class="article-list">
                <% for (var i = 0 ; i < articles.length; i++) { %>
                    <div class="article-item" onclick="location.href='/article/<%= articles[i].markdown%>'">
                        <div class="article-item-content">
                            <div class="article-item-left">
                                <div class="article-item-title">
                                    <%= articles[i].title %>
                                </div>
                                <div class="article-item-abstract">
                                    <%= articles[i].abstract %>
                                </div>
                            </div>
                            <div class="article-item-right">
                                <div class="article-item-type <%= articles[i].type.toLowerCase() %>"><%= articles[i].type %></div>
                                <div class="article-item-date"><%= articles[i].date %></div>
                            </div>
                        </div>
                        <div class="article-item-cover-img" style="background-image: url('<%= articles[i].image %>');"></div>
                    </div>
                <% } %>
            </div>
          </div>
      </div>
    </div>
    <%- include('footer.ejs') %>
    <%- include('widget.ejs') %>
    <script src="/public/index.js"></script>
  </body>
</html>
